<template>
	<view>
		<uni-nav-bar dark title="直播内容" :statusBar="true" left-icon="left" @clickLeft="onLeft">

		</uni-nav-bar>
		<uni-segmented-control :current="current" :values="items" style-type="text" active-color="#E96E40"
			@clickItem="onClickItem" />
		<view class="dataInfo">
			<view class="title">
				{{info.createTime}}
			</view>
			<view class="item">

				<image v-if="info.oneTeam && info.oneTeam.teamLogo" :src="imageUrl + info.oneTeam.teamLogo" mode="">
				</image>
				<image v-else src="../../static/user.jpg" mode=""></image>
				<view class="">
					{{info.oneTeam.teamName}}
				</view>
			</view>
			<view class="item">
				<image v-if="info.oneTeam.teamLogo" :src="imageUrl + info.twoTeam.teamLogo" mode=""></image>
				<image v-else src="../../static/user.jpg" mode=""></image>
				<view class="">
					{{info.twoTeam.teamName}}
				</view>
			</view>


		</view>

		<template v-if="current == 0">
			<uni-section title="拉流信息" type="line">
				<uni-list>
					<uni-list-item :title="playCode">
						<template v-slot:footer>
							<button class="copyBtn" @click="onCopy">复制</button>
						</template>
					</uni-list-item>
				</uni-list>
			</uni-section>
			<view class="buttons">
				<button @click="onStart">开始直播</button>
			</view>
		</template>
		<template v-if="current == 1">
			<uni-section title="推流地址" type="line">
				<uni-list>
					<uni-list-item :title="url">
						<template v-slot:footer>
							<button class="copyBtn" @click="onStartCode">复制</button>
						</template>
					</uni-list-item>
				</uni-list>
			</uni-section>
			<!-- <view class="buttons">
				<button @click="onStartCode">获取推流地址</button>
			</view> -->
		</template>

	</view>
</template>

<script>
	import {
		liverData
	} from '@/api/tournament/index.js'
	import {
		getToken
	} from '@/utils/auth'
	import {
		getseasonTournament
	} from '@/api/season/indx.js'
	import {
		imageUrl
	} from '@/config.js'
	export default {
		data() {
			return {
				url: '',
				id: '',
				time: '',
				current: 0,
				items: ['手机直播', '推流直播'],
				info: {
					oneTeam: {},
					twoTeam: {}
				},
				imageUrl: imageUrl,
				playCode: ''
			}
		},
		methods: {
			onClickItem(data) {
				console.log(data);
				let {
					currentIndex
				} = data;
				this.current = currentIndex;
			},
			onLeft() {
				uni.navigateBack()
			},
			onCopy() {
				uni.setClipboardData({
					data: this.playCode,
					success: function() {
						console.log('success');
						// this.$modal.msg('复制成功')
					}
				});
			},
			onStartCode() {
				uni.setClipboardData({
					data: this.url,
					success: function() {
						console.log('success');
					}
				});
			},
			onStart() {
				const liver = uni.requireNativePlugin('live-release-open');
				console.log('liverliver', liver);
				liver.startLive({
					title: ' ',
					token: getToken(),
					tournamentId: this.id,
					dateTime: this.time,
					screenOrientation: 0
				}, sucess => {
					console.log('调用成功', sucess)
				})
			}
		},
		onLoad({
			id,
			time
		}) {
			console.log('id是', id, 'time是', time);
			this.id = id;
			this.time = time;
			getseasonTournament(id).then(res => {
				this.info = res.data;
			})
			liverData({
				tournamentId: id,
				endTime: time
			}).then(res => {
				this.url = res.obsServer
				this.playCode = res.playCode
				console.log('响应数据', res)
			})
		}
	}
</script>

<style scoped lang="scss">
	.copyBtn {
		background-color: $btn-bg-color;
		color: #fff;
		font-size: 24rpx;
	}

	.buttons {
		margin-top: 40rpx;

		button {
			width: 90%;
			background-color: $btn-bg-color;
			color: #fff;
		}
	}

	.dataInfo {
		width: 90%;
		margin: 20rpx auto;
		background-color: #fff;
		box-shadow: 0 0 5px 2px #f1f1f1;
		border-radius: 20rpx;
		padding: 40rpx 40rpx;
		margin-top: 40rpx;

		.title {
			margin-bottom: 20rpx;
			color: #b2b2b2;
		}

		.item {
			display: flex;
			align-items: center;

			&:nth-child(2) {
				margin-bottom: 20rpx;
			}

			image {
				width: 80rpx;
				height: 80rpx;
				margin-right: 20rpx;
				border-radius: 100%;
			}
		}
	}
</style>